<template>
	<view>
		<swiper :display-multiple-items="4" :interval="2500" autoplay circular>
			<swiper-item class="teacheritem" v-for="(item, index) in list" :key="index" @click="topage(item)">
				<image mode="aspectFill" :src="item.avator.split(',')[0]"></image>
				<view class="name">{{ item.name }}</view>
				<view class="tipteacher">{{ item.major_arr[0].major_name || '' }}</view>
			</swiper-item>
		</swiper>
	</view>
</template>

<script>
export default {
	name: "teacher",
	props: {
		list: {
			type: Array,
			default: []
		}
	},
	data() {
		return {
			scrollTop: 0,
			old: {
				scrollTop: 0
			}
		};
	},
	methods: {
		scroll: function (e) {
			// console.log(e)
			this.old.scrollTop = e.detail.scrollTop
		},
		topage(item) {
			uni.navigateTo({
				url: '/pages/teacherinfo/teacherinfo?id=' + item.id
			})
		}
	}
}
</script>

<style lang="scss" scoped>
.scroll-view_H {
	white-space: nowrap;
	width: 100%;
}

.teacheritem {
	display: inline-block;
	width: 236rpx;
	height: 260rpx;
	text-align: center;
	background-color: #F7F7F7;

	.name {
		width: 200rpx;
		margin: 0 auto;
		-webkit-line-clamp: 1;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		overflow: hidden;
		text-overflow: ellipsis;
		font-size: 32rpx;
		font-family: Source Han Sans CN-Medium, Source Han Sans CN;
		font-weight: 500;
		color: #222222;
	}

	image {
		width: 152rpx;
		height: 152rpx;
		box-shadow: inset 0rpx 6rpx 12rpx 2rpx rgba(255, 255, 255, 0.16);
		border: 2rpx solid #FFFFFF;
		border-radius: 100%;
	}

	.tipteacher {
		width: 200rpx;
		margin: 0 auto;
		font-size: 28rpx;
		font-family: Source Han Sans CN-Medium, Source Han Sans CN;
		font-weight: 500;
		color: #555555;
		-webkit-line-clamp: 1;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		overflow: hidden;
		text-overflow: ellipsis;
	}
}
</style>